<template>
    <div style="width: 50%;margin: 0 auto;">
        <!-- 使用v-for循环遍历data.members数组，为每个成员生成一个表单 -->
        <el-form v-for="(member, index) in data.members" :key="index" :model="member" style=" padding-right: 40px;padding-top: 40px;padding-bottom: 40px;" class="card" :style="{ marginBottom: '20px' }">
            <el-form-item label="学号" label-width="80px">{{member.id  }} </el-form-item>
            <el-form-item label="姓名" label-width="80px">{{ member.name }}</el-form-item>
            <el-form-item label="工作细则" label-width="80px">
               {{ member.description }}
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    name: null,

    members: [],
    pageNum: 1,
    pageSie: 10,
    total: 47,
    formVisible: false,
    from: {}
});

//const load分页\查询接口
import request from '../utils/request';
const load=()=>{

    request({
            url: "/user/getUsers",
            method: "get",
            headers: {
                "Content-Type": "application/json"
            },
            params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
}
        }).then(res =>{
          console.log(res.data)
          data.members=res.data
        })
}
load()
</script>

<style scoped>
.card {
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(194,176,231,1);
    height: 200px;
}
</style>